<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .card-header {
            padding: 4.75rem 1.25rem;
            border: 0;
            background: #e9ecef;
        }
        h1 > span{
            font-size: 16px;
        }
    </style>
</head>
<body>
<h1 class="card-header text-center">学员信息表<br><span>1803</span></h1>
<div class="container">
    <h3 class="mt-4">添加</h3>
    <div class="form-inline mt-4">
        <div class="form-group mb-2">
            <input type="text" class="form-control" placeholder="姓名" id="n">
        </div>
        <select title="" class="custom-select ml-3 mb-2" id="s">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" placeholder="年龄" id="a">
        </div>
        <button type="submit" class="btn btn-primary mb-2" id="btn">添加</button>

    </div>

    <h3 class="mt-4">列表</h3>
    <table class="table mt-4">
        <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">性别</th>
            <th scope="col">年龄</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
    function al() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = JSON.parse(xmlhttp.responseText);
                json.data.reverse();
                console.log(json);
                document.querySelector("tbody").innerHTML = "";
                document.querySelectorAll("input")[0].value = "";
                document.querySelectorAll("input")[1].value = "";
                for(let i = 0;i < json.data.length;i++){
                    var tr = document.createElement("tr");
                    var tdName = document.createElement("td");
                    tdName.innerHTML = json.data[i].studentName;
                    var tdSex = document.createElement("td");
                    tdSex.innerHTML = json.data[i].sex;
                    var tdAge = document.createElement("td");
                    tdAge.innerHTML = json.data[i].age;
                    tr.appendChild(tdName);
                    tr.appendChild(tdSex);
                    tr.appendChild(tdAge);
                    document.querySelector("tbody").appendChild(tr);
                }
            }
        };
        xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
        xmlhttp.send();
    }
    al();
    document.querySelector("#btn").addEventListener("click",function(){
        var n = document.querySelector("#n").value;
        var s = document.querySelector("#s").value;
        var a = document.querySelector("#a").value;
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText);
                al();
            }
        };
        xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a, true);
        xmlhttp.send();
    });
</script>
</body>
</html>